<template>
    <div class="monitor">
        <!-- 数据卡片 -->
        <n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
            <n-grid-item>
                <n-card
                    title="访问量"
                    :segmented="{ content: 'hard', footer: 'hard' }"
                    size="small"
                    :bordered="false"
                >
                    <template #header-extra>
                        <n-tag type="success">日</n-tag>
                    </template>
                    <div class="px-1 py-1 flex justify-between">
                        <CountTo :startVal="1" :endVal="2000" class="text-3xl" />
                    </div>
                    <div class="px-1 py-1 flex justify-between">
                        <div class="text-sn">
                            日同比
                            <CountTo :start="1" suffix="%" :endVal="88"></CountTo>
                            <n-icon size="12" color="#00ff6f">
                                <CaretUpOutlined />
                            </n-icon>
                        </div>
                        <div class="text-sn">
                            周同比
                            <CountTo :start="1" suffix="%" :endVal="50"></CountTo>
                            <n-icon size="12" color="#ffde66">
                                <CaretDownOutlined />
                            </n-icon>
                        </div>
                    </div>
                    <template #footer>
                        <div class="flex justify-between">
                            <div class="text-sn">总访问量:</div>
                            <div>
                                <CountTo :startVal="1" :endVal="20020"></CountTo>
                            </div>
                        </div>
                    </template>
                </n-card>
            </n-grid-item>
            <n-grid-item>
                <n-card
                    title="销售额"
                    :segmented="{ content: 'hard', footer: 'hard' }"
                    size="small"
                    :bordered="false"
                >
                    <template #header-extra>
                        <n-tag type="info">周</n-tag>
                    </template>
                    <div class="py-1 px-1 flex justify-between">
                        <CountTo prefix="￥" :startVal="1" :endVal="99264" class="text-3xl"></CountTo>
                    </div>
                    <div class="py-2 px-2 flex justify-between">
                        <div class="text-sn flex-1">
                            <n-progress
                                type="line"
                                :percentage="14.8"
                                :indicator-placement="'inside'"
                                processing
                            ></n-progress>
                        </div>
                    </div>
                    <template #footer>
                        <div class="flex justify-between">
                            <div class="text-sn">总销售额:</div>
                            <div class="text-sn">
                                <CountTo prefix="￥" :startVal="1" :endVal="402668" />
                            </div>
                        </div>
                    </template>
                </n-card>
            </n-grid-item>
            <n-grid-item>
                <n-card
                    title="订单量"
                    :segmented="{ content: 'hard', footer: 'hard' }"
                    size="small"
                    :bordered="false"
                >
                    <template #header-extra>
                        <n-tag type="warning">周</n-tag>
                    </template>
                    <div class="py-1 px-1 flex justify-between">
                        <CountTo :startVal="1" :endVal="96246" class="text-3xl" />
                    </div>
                    <div class="py-1 px-1 flex justify-between">
                        <div class="text-sn">
                            日同比
                            <CountTo :startVal="1" :endVal="30" suffix="%" />
                            <n-icon size="12" color="#00ff6f">
                                <CaretUpOutlined />
                            </n-icon>
                        </div>
                        <div class="text-sn">
                            周同比
                            <CountTo :startVal="1" :endVal="30" suffix="%" />
                            <n-icon size="12" color="#ffde66">
                                <CaretDownOutlined />
                            </n-icon>
                        </div>
                    </div>
                    <template #footer>
                        <div class="flex justify-between">
                            <div class="text-sn">转化率:</div>
                            <div class="text-sn">
                                <CountTo :startVal="1" :endVal="50" suffix="%" />
                            </div>
                        </div>
                    </template>
                </n-card>
            </n-grid-item>
            <n-grid-item>
                <n-card
                    title="成交额"
                    :segmented="{ content: 'hard', footer: 'hard' }"
                    size="small"
                    :bordered="false"
                >
                    <template #header-extra>
                        <n-tag type="error">月</n-tag>
                    </template>
                    <div class="py-1 px-1 flex justify-between">
                        <CountTo :startVal="1" :endVal="86895" prefix="￥" class="text-3xl" />
                    </div>
                    <div class="py-1 px-1 flex justify-between">
                        <div class="text-sn">
                            月同比
                            <CountTo :startVal="1" :endVal="38" suffix="%" />
                            <n-icon size="12" color="#00ff6f">
                                <CaretUpOutlined />
                            </n-icon>
                        </div>
                        <div class="text-sn">
                            月同比
                            <CountTo :startVal="1" :endVal="18" suffix="%" />
                            <n-icon size="12" color="#ffde66">
                                <CaretDownOutlined />
                            </n-icon>
                        </div>
                    </div>
                    <template #footer>
                        <div class="flex justify-between">
                            <div class="text-sn">总成交额:</div>
                            <div class="text-sn">
                                <CountTo prefix="￥" :startVal="1" :endVal="375320" />
                            </div>
                        </div>
                    </template>
                </n-card>
            </n-grid-item>
        </n-grid>
        <!-- 导航卡片 -->
        <div class="mt-4">
            <n-grid cols="1 s:2 m:3 l:8 xl:8 2xl:8" responsive="screen" :x-gap="16" :y-gap="8">
                <n-gi v-for="(item, index) in iconList" :key="index">
                    <n-card content-style="padding-top: 0;" size="small" :bordered="false">
                        <template #footer>
                            <div class="cursor-pointer">
                                <p class="flex justify-center">
                                    <span>
                                        <n-icon
                                            :size="item.size"
                                            class="flex-1"
                                            :color="item.color"
                                        >
                                            <component
                                                :is="item.icon"
                                                v-on="item.eventObject || {}"
                                            />
                                        </n-icon>
                                    </span>
                                </p>
                                <p class="flex justify-center">
                                    <span>{{ item.title }}</span>
                                </p>
                            </div>
                        </template>
                    </n-card>
                </n-gi>
            </n-grid>
        </div>
        <!-- 访问量/流量趋势 -->
        <VisitTab />
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { CountTo } from "@/components/CountTo/index"
import VisitTab from "./components/VisitTab.vue";
import {
    CaretUpOutlined,
    CaretDownOutlined,
    UsergroupAddOutlined,
    BarChartOutlined,
    ShoppingCartOutlined,
    AccountBookOutlined,
    CreditCardOutlined,
    MailOutlined,
    TagsOutlined,
    SettingOutlined,
} from '@vicons/antd';

const cardHeaderStyle = ref({ 'border-bottom': '1px solid #eee', 'font-size': '16px' });

// 图标列表
const iconList = [
    {
        icon: UsergroupAddOutlined,
        size: "32",
        title: "用户",
        color: "#69c0ff",
        eventObject: {
            click: () => { }
        }
    },
    {
        icon: BarChartOutlined,
        size: "32",
        title: "分析",
        color: "#69c0ff",
        eventObject: {
            click: () => { }
        }
    },
    {
        icon: ShoppingCartOutlined,
        size: '32',
        title: '商品',
        color: '#ff9c6e',
        eventObject: {
            click: () => { },
        },
    },
    {
        icon: AccountBookOutlined,
        size: '32',
        title: '订单',
        color: '#b37feb',
        eventObject: {
            click: () => { },
        },
    },
    {
        icon: CreditCardOutlined,
        size: '32',
        title: '票据',
        color: '#ffd666',
        eventObject: {
            click: () => { },
        },
    },
    {
        icon: MailOutlined,
        size: '32',
        title: '消息',
        color: '#5cdbd3',
        eventObject: {
            click: () => { },
        },
    },
    {
        icon: TagsOutlined,
        size: '32',
        title: '标签',
        color: '#ff85c0',
        eventObject: {
            click: () => { },
        },
    },
    {
        icon: SettingOutlined,
        size: '32',
        title: '配置',
        color: '#ffc069',
        eventObject: {
            click: () => { },
        },
    },
]
</script>
<style lang="less" scoped>
.monitor {
    height: 100%;
    width: 100%;
}
</style>
